<%inherit file="/home_application/base_new.html"/>

<%block name="css">
<!--本模块加载的css-->
<link href="${STATIC_URL}assets/art-dialog/css/dialog.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="${STATIC_URL}assets/jquery-ui-1.12.1.custom/jquery-ui.css">
<link rel="stylesheet" href="${STATIC_URL}assets/jquery-ui-1.12.1.custom/jquery-ui.structure.css">
<link rel="stylesheet" href="${STATIC_URL}assets/jquery-ui-1.12.1.custom/jquery-ui.theme.css">
<link rel="stylesheet" href="${STATIC_URL}css/userDefined.css">
</%block>


<%block name="content">
<article class="content">

    <!-- Page Heading -->
    <div class="row page-header-box">
        <div class="col-lg-12">
            <h1 class="page-header">
                虚拟机管理
            </h1>
        </div>
    </div>

    <section class="main-list">
        <div class="main-wrap">
            <!--div class="panel panel-default">
                <div class="panel-heading">
                    虚拟机搜索
                </div>
                <div class='panel-body'>
                    <div class="col-sm-8">
                        <form class="form-horizontal mt15" id="user_form" action="${SITE_URL}event/addEventSource/" method="post">
                            <div style="display:none">
                                <input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}">
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">操作系统类型：</label>
                                <div class="col-sm-10">
                                    <select class="form-control" id="event_role" name="event_role">
                                        <option value="1">centos7</option>
                                        <option value="2">centos6</option>
                                        <option value="2">window</option>
                                        <option value="2">ubuntu</option>
                                    </select>
                                    <span class="king-required-tip text-danger ml5">*</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">虚拟机名称：</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" placeholder="请输入虚拟机名称" id="user_account" name="user_account">
                                    <span class="king-required-tip text-danger ml5">*</span>
                                </div>
                                <div class="col-sm-1"></div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label"></label>
                                <div class="col-sm-10">
                                    <button class="king-btn king-info mr10" title="搜索" type="submit">
                                        <i class="fa fa-save btn-icon"></i>搜索
                                    </button>
                                    <a href="${SITE_URL}vmware/manage" class="king-btn king-default" title="返回">
                                        <i class="fa fa-mail-reply-all btn-icon"></i>返回
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div-->
            <div class="panel panel-default">
                <div class="panel-heading">
                    虚拟机列表
                </div>

                <div class="panel-btns">
                    <!--a type="button" onclick="VCenterManage.create();"  class="king-btn king-success pull-left mt15 ml15">
                        <i class="fa fa-gavel mr5"></i>创建虚拟机
                    </a-->
                    <a type="button" onclick="VCenterManage.clone();"class="king-btn king-info pull-left mt15 ml15">
                        <i class="fa fa-user-plus mr5"></i>克隆虚拟机
                    </a>
                    <a type="button" data-type="success" onclick="VCenterManage.poweroff();"  class="king-btn king-info pull-left mt15 ml15">
                        <i class="fa fa-power-off mr5"></i>关闭虚拟机
                    </a>

                    <a type="button" onclick="VCenterManage.start();"  class="king-btn king-info pull-left mt15 ml15">
                        <i class="fa fa-play mr5"></i>开启虚拟机
                    </a>
                    <a type="button" onclick="VCenterManage.reboot();"  class="king-btn king-info pull-left mt15 ml15">
                        <i class="fa fa-history mr5"></i>重启虚拟机
                    </a>
                    <a type="button" onclick="VCenterManage.destroy();"  class="king-btn king-info pull-left mt15 ml15">
                        <i class="fa fa-trash-o mr5"></i>销毁虚拟机
                    </a>
                    <a type="button" onclick="VCenterManage.webssh();" class="king-btn king-info pull-left mt15 ml15">
                        <i class="fa fa-soundcloud mr5"></i>WebSSH
                    </a>
                    <!--a type="button" onclick="VCenterManage.RDP();" class="king-btn king-info pull-left mt15 ml15">
                        <i class="fa fa-user-plus mr5"></i>RDP
                    </a-->
                </div>

                <div class='panel-body panel-search-body'>
                    <div class="panel-content">
                        <table id="vcenter_manage_record" class="table table-bordered table-striped table-hover">
                        </table>
                    </div>
                    <div id="advance">

                    </div>
                </div>

            </div>
        </div>
        <style>
            .tab-content-hide-border{
                border: none !important;
            }
        </style>
    </section>

    <section class="side-content-wrapper hidden" id="vm_side" data-type="close">
        <div class="side-content open shield-edit">
            <div class="side-detail" id="shield-detail">
                <div class="strategy-detail info-item new-strategy">
                    <div class="title">
                        <span id="shield_action">快照列表</span>
                    </div>

                    <div class="detail">

                        <div class="detail-row">
                            <div class="subtitle lh-30">基本信息</div>
                            <div class="subcontent">
                                <label class="config__inputItem">虚拟机名称{{vminfo.name}}</label>
                            </div>
                        </div>

                        <table class="table table-header-bg table-bordered mb0">
                            <thead>
                            <tr>
                                <td>快照名称</td>
                                <td>快照时间</td>
                                <td>快照描述</td>
                                <td>操作</td>
                            </tr>
                            </thead>
                            <tbody>
                            <template v-if="snapshot_data.length>0">
                                <template v-for="snapshot in snapshot_data">
                                    <tr data-id="{{snapshot.id}}">
                                        <td>{{snapshot.name}}</td>
                                        <td>{{snapshot.time}}</td>
                                        <td>{{snapshot.description}}</td>
                                        <td class="operation">
                                            ##<div class="switch switch-mini mr10" data-on="success" data-on-label="ON" data-off-label="OFF">
                                            <input v-model="snapshot.is_enabled" type="checkbox" name="status"/>
                                            ##</div>
                                            <i class="iconfont icon-bianji edit" @click="add_alarm_strategy($event, snapshot)"></i>
                                            <i class="iconfont icon-guanbi delete" @click="del_alarm_strategy($event, snapshot)"></i>
                                        </td>
                                    </tr>
                                </template>
                            </template>
                            <template v-if="snapshot_data.length==0">
                                <tr>
                                    <td colspan="9" class="no-data">
                                        无查询数据
                                    </td>
                                </tr>
                            </template>
                            </tbody>
                        </table>
                        <div class="loading hidden" id="vm_snapshot_table_loading">
                            <div class="loading-wrapper">
                                <img alt="loadding" src="${STATIC_URL}img/hourglass_36.gif">
                                刷新中，请稍等
                            </div>
                        </div>
                        <div class="paging-wrapper clearfix" id="vm_snapshot_paging_footer">

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="close-btn open" id="close" data-type="close">关闭</div>
    </section>

</article>


<div id="createVmWizard" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">创建虚拟机</h4>
            </div>
            <div class="modal-body">
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="container">
                            <ul>
                                <li><a href="#tab1" data-toggle="tab">配置基本信息</a></li>
                                <li><a href="#tab2" data-toggle="tab">配置主机信息</a></li>
                                <li><a href="#tab3" data-toggle="tab">配置网络信息</a></li>
                                <li><a href="#tab4" data-toggle="tab">配置存储信息</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="tab-content tab-content-hide-border">
                    <div class="tab-pane" id="tab1">
                        <div class="row">
                            <form class="form-horizontal">
                                <div class="form-group clearfix ">
                                    <label class="col-sm-3 control-label bk-lh30 pt0">虚拟机名称：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control bk-valign-top" id="" placeholder="请输入虚拟机名称"> </div>
                                </div>
                                <div class="form-group clearfix ">
                                    <label class="col-sm-3 control-label bk-lh30 pt0">虚拟机个数：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control bk-valign-top" id="" placeholder="请输入虚拟机个数"> </div>
                                </div>
                                <div class="form-group clearfix ">
                                    <label class="col-sm-3 control-label bk-lh30 pt0">虚拟机描述：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control bk-valign-top" id="" placeholder="请输入虚拟机描述"> </div>
                                </div>

                                <div class="form-group clearfix ">
                                    <label class="col-sm-3 control-label bk-lh30 pt0">所属业务：</label>
                                    <div class="col-sm-9">
                                        <div id="ccAppList" style="display:inline-block;width:90%">
                                            <!-- select2 通过ajax start -->
                                            <input type="hidden" class="select2_box" style="width:100%;">
                                            <!-- select2 通过ajax end -->
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab2">
                        <div class="row">
                            <form class="form-horizontal">
                                <div class="form-group clearfix ">
                                    <label class="col-sm-3 control-label bk-lh30 pt0">选择操作系统：</label>
                                    <div class="col-sm-9">
                                        <select name="" id="" class="form-control bk-valign-top">
                                            <option value="选择项1">RHEL6</option>
                                            <option value="选择项2">Win2008</option>
                                            <option value="选择项3">Ubuntu</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group clearfix ">
                                    <label class="col-sm-3 control-label bk-lh30 pt0">选择集群：</label>
                                    <div class="col-sm-9">
                                        <select name="" id="" class="form-control bk-valign-top">
                                            <option value="选择项1">Shanghai-Cluster</option>
                                            <option value="选择项2">Beijing-Cluster</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group clearfix ">
                                    <label class="col-sm-3 control-label bk-lh30 pt0">选择主机：</label>
                                    <div class="col-sm-9">
                                        <select name="" id="" class="form-control bk-valign-top">
                                            <option value="选择项1">10.0.2.8</option>
                                            <option value="选择项1">10.0.2.12</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab3">
                        <div class="row">
                            <form class="form-horizontal">
                                <div class="form-group clearfix ">
                                    <label class="col-sm-3 control-label bk-lh30 pt0">选择网络：</label>
                                    <div class="col-sm-9">
                                        <select name="" id="" class="form-control bk-valign-top">
                                            <option value="选择项1">办公网</option>
                                            <option value="选择项1">生产网</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab4">
                        <div class="row">
                            <form class="form-horizontal">
                                <div class="form-group clearfix ">
                                    <label class="col-sm-3 control-label bk-lh30 pt0">选择存储：</label>
                                    <div class="col-sm-9">
                                        <select name="" id="" class="form-control bk-valign-top">
                                            <option value="选择项1">Datastore01-4T</option>
                                            <option value="选择项1">Datastore02-1T</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <ul class="pager wizard">
                        <li class="next"><a href="javascript:;">下一步</a></li>
                        <li class="finish"><a href="javascript:;">创建</a></li>
                    </ul>
                </div>
            </div>
            <!--div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div-->
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div id="cloneVmWizard" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">克隆虚拟机</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <form class="form-horizontal">
                        <div class="row">
                            <form class="form-horizontal">
                                <div class="form-group clearfix ">
                                    <label class="col-sm-3 control-label bk-lh30 pt0">虚拟机名称：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control bk-valign-top" id="cloneVmName" placeholder="请输入克隆的虚拟机名称">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!--div class="form-group clearfix ">
                            <label class="col-sm-3 control-label bk-lh30 pt0">克隆虚拟机个数：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control bk-valign-top" id="" placeholder="请输入克隆虚拟机个数"> </div>
                        </div>
                        <div class="form-group clearfix ">
                            <label class="col-sm-3 control-label bk-lh30 pt0">克隆虚拟机描述：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control bk-valign-top" id="" placeholder="请输克隆虚拟机描述"> </div>
                        </div-->

                        <div class="row">
                            <form class="form-horizontal">
                                <div class="form-group clearfix ">
                                    <label class="col-sm-3 control-label bk-lh30 pt0">选择数据中心：</label>
                                    <div class="col-sm-9">
                                        <div id="select_datacenter" style="display:inline-block;width:90%">
                                            <!-- select2 通过ajax start -->
                                            <input type="hidden" class="select2_box" style="width:100%;">
                                            <!-- select2 通过ajax end -->
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="row">
                            <form class="form-horizontal">
                                <div class="form-group clearfix ">
                                    <label class="col-sm-3 control-label bk-lh30 pt0">选择集群：</label>
                                    <div class="col-sm-9">
                                        <div id="select_cluster" style="display:inline-block;width:90%">
                                            <!-- select2 通过ajax start -->
                                            <input type="hidden" class="select2_box" style="width:100%;">
                                            <!-- select2 通过ajax end -->
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="row">
                            <form class="form-horizontal">
                                <div class="form-group clearfix ">
                                    <label class="col-sm-3 control-label bk-lh30 pt0">选择存储：</label>
                                    <div class="col-sm-9">
                                        <div id="select_datastore" style="display:inline-block;width:90%">
                                            <!-- select2 通过ajax start -->
                                            <input type="hidden" class="select2_box" style="width:100%;">
                                            <!-- select2 通过ajax end -->
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="VCenterManage.executeClone();">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</%block>

<%block name="script">
<link rel="stylesheet" type="text/css" href="${STATIC_URL}css/left-side.css">
<script type="text/javascript" src="${STATIC_URL}assets/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script type="text/javascript" src="${STATIC_URL}assets/art-dialog/dist/dialog.js"></script>
<script type="text/javascript" src="${STATIC_URL}assets/twitter-bootstrap-wizard/jquery.bootstrap.wizard.js"></script>
<script type="text/javascript" src="${STATIC_URL}assets/twitter-bootstrap-wizard/prettify.js"></script>
<script type="text/javascript" src="${STATIC_URL}js/vmware_manage.js"></script>
</%block>